<template>
  <!-- 子组件传值父组件  这里是子组件 子组件=父组件 通过props传入三个参数 -->
  <!-- 父传子 传 在父组件标签上定义一个属性  属性名=属性值  收 在子组件定义一个 props方法  props：["属性名"]   然后再使用差值表达式把属性名用到html中
          注意点  字体图标使用需要在标签内部使用v-html属性 不然解析出来会是字符串
            数字传值时需要使用：绑定 转换一下 不然直接使用会是字符串 而不是数值

        子传父
        在子组件标签上绑定一个事件  @子组件事件名 = '父组件方法'
        父组件内触发 使用this.$emit('子组件方法名')
   -->
  <van-cell is-link class="mycell" center>
    <template #title>
      <div class="title">{{ title }}</div>
    </template>
    <template #default>
      <!-- 如果是图片 就用img标签渲染 如果是文字 就用div -->
      <img class="img" v-if="type === 'img' && !value" src="@/assets/logo.png" alt="" />
      <img class="img" v-else-if="type === 'img' && value" :src="baseUrl + value" alt="" />
      <div v-else class="value">
        {{ value }}
      </div>
    </template>
    <template #icon>
      <!-- 字体图标传值不能使用差值表达式 会被解析成字符串 需要使用v-html -->
      <i class="iconfont" v-html="icon"></i>
    </template>
  </van-cell>
</template>

<script>
export default {
  // 接收子组件的传参并渲染
  props: ['title', 'value', 'icon', 'type'],
  data () {
    return {
      baseUrl: process.env.VUE_APP_URL // 拼接一个基地址
    }
  }
}
</script>

<style lang="less" scoped>
.mycell {
  background-color: #fff;
  .title {
    padding-left: 10px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #181a39;
    line-height: 20px;
    letter-spacing: 0px;
  }
  .value {
    padding-right: 5px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: right;
    color: #5b5d75;
    line-height: 20px;
    letter-spacing: 0px;
  }
  .img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>
